import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Dimensions,
    ScrollView,
    FlatList,
} from 'react-native';

//引用插件
import Swiper from 'react-native-swiper';
import {StackNavigator} from "react-navigation";
// 取得屏幕的宽高Dimensions
const { width, height } = Dimensions.get('window');



export default class ai extends Component {
    
    constructor(props) {
        super(props);
        this.state = {
            swiperShow: false,
            special:[
                {title: '人工智能基础'},
                {title: '机器人'},
                {title: '深度学习'},
                {title: '神经网络'},
            ],
            special2:[
                {title: '知识1', describe:''},
                {title: '知识2', describe:''},
                {title: '知识3', describe:''},
                {title: '知识4', describe:''},
                {title: '知识5', describe:''},
                {title: '知识6', describe:''},
            ]
       
        };
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                swiperShow: true,
            });
        }, 0)
    }

    renderBanner() {
        if (this.state.swiperShow) {
            return (
                <Swiper
                    style={styles.wrapper}
                    height={width * 40 / 75}
                    showsButtons={false}
                    autoplay={true}
                    paginationStyle={styles.paginationStyle}
                    dotStyle={styles.dotStyle}
                    activeDotStyle={styles.activeDotStyle}
                >
                    <Image source={require('../../img/4.jpg')} style={styles.bannerImg} />
                    <Image source={require('../../img/2.jpg')} style={styles.bannerImg} />
                    <Image source={require('../../img/3.jpg')} style={styles.bannerImg} />
                </Swiper>
            )
        } else {
            return (
                <View style={{ height: width * 40 / 75 }}>
                    <Image source={require('../../img/1.jpg')} style={styles.bannerImg} />
                </View>
            );
        }
    }

    renderTips() {
       
        return (
            <View style={styles.tips}>
                <Text style={styles.tipItem}>人工智能知识库</Text>
            </View>
        )
    }

    renderSpecial(){
        return (
            <View style={styles.moduleBox}>
                <FlatList
                    data={this.state.special}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderSpecialItem}
                    numColumns={3}
                />
            </View>
        )
    }
    renderSpecialItem = ({ item }) => {
        return (
            <TouchableOpacity style={styles.specialItem}>
                <Image source={require('../../img/topic.jpg')} style={styles.specialImg} />
                <View style={styles.specialContainer}>
                    <Text style={styles.specialTitle} numberOfLines={2}>{item.title}</Text>
                    
                 
                </View>
            </TouchableOpacity>
        )
    }



    renderLike(){
        return (
            <View style={styles.moduleBox}>
                <FlatList
                    data={this.state.special2}
                    keyExtractor={(item, index) => index}
                    renderItem={this.renderLikeItem}
                    numColumns={2}
                />
            </View>
        )
    }
    renderLikeItem = ({ item }) => {
        return (
            <TouchableOpacity style={styles.likeItem} >
                <Image source={require('../../img/topic.jpg')} style={styles.likeImg} />
                <Text style={styles.likeDesc} numberOfLines={1}>{item.describe}</Text>
                <View style={styles.likeContainer}>
                    <Text style={styles.likeTitle} numberOfLines={2}>{item.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    

    render() {
        return (
            <View style={styles.container}>
                {this.renderBanner()}
                {this.renderTips()}
                {this.renderSpecial()}
                <View style={styles.tips}>
                    <Text style={styles.tipItem}>推荐知识库</Text>
                </View>
                {this.renderLike()}
            </View>
        );
    }
}

const DetailScreen = () => (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>Detail Screen</Text>
    </View>
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#efefef',
    },
    wrapper: {
        width: width,
    },
    paginationStyle: {
        bottom: 6,
    },
    dotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        opacity: 0.4,
        borderRadius: 0,
    },
    activeDotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        borderRadius: 0,
    },
    tipItem: {
        fontSize: 14,
        color: '#333',
    },
    tips: {
        backgroundColor: '#fff',
        flexDirection: 'row',
        width: width,
        justifyContent: 'space-around',
        paddingTop: 12,
        paddingBottom: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
        marginTop:5
    },
    moduleBox: {
        width: width,
        alignItems:'center',
        backgroundColor: '#fff',
        paddingBottom:10,
        marginBottom:10,
    },
    specialItem:{
        width:width/3 -12,
        marginLeft:4,
        marginRight:5,
        marginBottom:15,
        marginTop:5
    },
    specialImg:{
        width:width/3 -12,
        height:width/3 -12,
        backgroundColor:'#f4f4f4'
    },
    specialTitle:{
        fontSize:14,
        color:'#666',
        marginTop:8,
        marginBottom:4,
    },
    specialPrice:{
        fontSize:14,
        color:'#b4282d',
    },
    likeItem:{
        width:width/2 -15,
        marginLeft:5,
        marginRight:5,
        marginBottom:15,
        marginTop:5
    },
    likeImg:{
        width:width/2 -15,
        height:width/2 -15,
        backgroundColor:'#f4f4f4'
    },
    likeDesc:{
        backgroundColor:'#F1ECE2',
        color:'#9F8A60',
        paddingTop:8,
        paddingBottom:8,
        paddingLeft:4,
        paddingRight:4,
    },
    likeTitle:{
        fontSize:14,
        color:'#666',
        marginTop:8,
        marginBottom:4,
    },
    likePrice:{
        fontSize:14,
        color:'#b4282d',
    }
   
});



